<template>
  <div class="page">
    <!-- 左侧导航栏 -->
    <div class="page_left">
      <div class="page_left_bg">
        <div class="page_logo">
          <div class="logo">
            <img src="../../static/images/img/vuetifylogo.png" alt />
          </div>
          <div class="logo_cont">Vuetif y MD</div>
        </div>
        <hr class="logo_hr" />
        <div>
          <router-link v-for="item in nav_list" :key="item.id" :to="item.href">
            <div class="a_i">
              <span :class="`iconfont ${item.i_class}`"></span>
            </div>
            <div class="a_title">{{item.a_title}}</div>
          </router-link>
          <div class="a_bottom">
            <div class="a_i">
              <span class="iconfont icon-icon_update"></span>
            </div>
            <div class="a_title">Upgrade To PRO</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧内容栏 -->
    <div class="page_right" ref="wrapper">
      <div class="conent">
        <keep-alive>
        <router-view></router-view>
        </keep-alive>
      </div>
    </div>
  </div>
</template>
<script>
import "@/assets/font/iconfont.css";
import BScroll from "better-scroll";

export default {
  name: "Home",
  data() {
    return {
      bs: null,
      nav_list: [
        {
          id: 1,
          href: "/home/dashboard",
          a_title: "Dashboard",
          i_class: "icon-fanggepailie"
        },
        {
          id: 2,
          href: "/home/userprofile",
          a_title: "User Profile",
          i_class: "icon-user"
        },
        {
          id: 3,
          href: "/home/tablelist",
          a_title: "Table List",
          i_class: "icon-jilu"
        },
        {
          id: 4,
          href: "/home/typography",
          a_title: "Typography",
          i_class: "icon-zifuxiao"
        },
        {
          id: 5,
          href: "/home/icons",
          a_title: "Icons",
          i_class: "icon-jiaoyinzujifangke"
        },
        {
          id: 6,
          href: "/home/maps",
          a_title: "Maps",
          i_class: "icon-dingwei"
        },
        {
          id: 7,
          href: "/home/notifications",
          a_title: "Notifications",
          i_class: "icon-Pathx"
        }
      ]
    };
  },
  mounted() {
    this.bs = new BScroll(this.$refs.wrapper, {
      scrollY: true,
      click: true,
      bounce: true,
      momentumLimitDistance: 5,
      scrollY: true,
      scrollbar: {
        fade: true,
        interactive: false // 1.8.0 新增
      },
      mouseWheel: true
    });
  }
};
</script>
<style scoped lang='less'>
.page {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  overflow: hidden;
  .page_left {
    width: 18%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-image: url("https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-2.32103624.jpg");
    background-position: center center;
    .page_left_bg {
      background: rgba(27, 27, 27, 0.74);
      height: 100%;
      box-sizing: border-box;
      padding: 0 15px;
      .page_logo {
        padding: 15px 0;
        display: flex;
        overflow: hidden;
        .logo {
          width: 40px;
          height: 40px;
          background-color: #fff;
          border-radius: 50%;
          margin: 0 10px 0 15px;
          img {
            display: block;
            margin: 20%;
            width: 60%;
            height: 60%;
          }
        }
        .logo_cont {
          line-height: 2.5;
          font-weight: 500;
          font-size: 18px;
        }
      }
      .logo_hr {
        border-bottom: 0;
        margin-bottom: 20px;
      }
      a {
        color: #fff;
        display: block;
        padding: 10px 15px;
        display: flex;
        border-radius: 4px;
        margin-top: 10px;
        overflow: hidden;
        &:first-child {
          margin: 0;
        }
        .a_i {
          font-size: 22px;
          margin-right: 10px;
        }
        .a_title {
          font-size: 14px;
          font-weight: 300;
          padding: 0;
          line-height: 30px;
        }
      }
      .router-link-active {
        background-color: #4caf50;
      }
      .a_bottom {
        color: #fff;
        display: block;
        padding: 10px 15px;
        display: flex;
        margin-top: 70%;
        overflow: hidden;
      }
    }
  }
  .page_right {
    width: 82%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgb(238, 238, 238);
  }
}
</style>
